﻿@page "/Grid/PagingAndScrolling/Paging"
@layout DataProviderAccessArea<INwindDataProvider>

<DemoPageSectionComponent Id="Grid-PagingAndScrolling-Paging" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        @inject NwindDataService NwindDataService

        <div class="grid-container">
            <DxGrid Data="@DataSource"
                    PageSize="20"
                    PagerPosition="GridPagerPosition.TopAndBottom"
                    PageSizeSelectorVisible="true"
                    PageSizeSelectorItems="@(new int[] { 10, 20, 100 })"
                    PageSizeSelectorAllRowsItemVisible="true"
                    PagerSwitchToInputBoxButtonCount="10"
                    PagerVisibleNumericButtonCount="10"
                    ColumnResizeMode="GridColumnResizeMode.NextColumn"
                    TextWrapEnabled="false"
                    SizeMode="Params.SizeMode">
                <Columns>
                    <DxGridDataColumn FieldName="ShipName" MinWidth="100" />
                    <DxGridDataColumn FieldName="ShipCity" Width="15%" />
                    <DxGridDataColumn FieldName="ShipPostalCode" Width="10%" />
                    <DxGridDataColumn FieldName="ShipCountry" Width="15%" />
                    <DxGridDataColumn FieldName="Freight" Width="10%" />
                    <DxGridDataColumn FieldName="OrderDate" Width="10%" MinWidth="80" />
                    <DxGridDataColumn FieldName="ShippedDate" Width="10%" MinWidth="80" />
                </Columns>
            </DxGrid>
        </div>
    </ChildContentWithParameters>

    @code {
        IEnumerable<Order> DataSource { get; set; }

        protected override async Task OnInitializedAsync() {
            DataSource = await NwindDataService.GetOrdersAsync();
        }
    }
</DemoPageSectionComponent>
